<template>
  <view class="container">
    <div
      class="changeType bg-white font-size-32rpx position-fixed top-32rpx right-32rpx w-80rpx h-80rpx"
      @click="state.isMerchant = !state.isMerchant"
      >{{ state.isMerchant ? '' : '' }}</div
    >
    <view style="height: 100vh; background: #fff">
      <view class="img-a">
        <view class="t-b">
          您好，
          <br />
          欢迎使用,<br /><u>微信一键登录</u>
        </view>
      </view>
      <view class="login-view" style="">
        <view class="t-login">
          <form class="cl" v-if="state.isMerchant">
            <view class="t-a">
              <text class="txt">邮箱</text>
              <input
                name="account"
                placeholder="请输入您的账号"
                maxlength="20"
                v-model="form.account"
              />
            </view>
            <view class="t-a">
              <text class="txt">密码</text>
              <input
                type="password"
                name="code"
                maxlength="18"
                placeholder="请输入您的密码"
                v-model="form.password"
              />
            </view>
            <button @tap="submit">登 录</button>
            <!-- <view class="reg" @tap="reg()">注 册</view> -->
          </form>
          <div v-else>
            <view class="t-f"><text>—————— 微信一键登录 ——————</text></view>
            <view class="t-e cl">
              <view class="t-g" w-100rpx h-100rpx @tap="wxLogin()"
                ><u-image
                  width="100px"
                  height="100px"
                  mode="widthFix"
                  src="https://zhoukaiwen.com/img/loginImg/wx.png"
                ></u-image
              ></view>
              <!-- <view class="t-g" @tap="zfbLogin()"
                ><image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image
              ></view> -->
            </view>
          </div>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { useAuthStore } from '@/state/modules/auth';
  import { onLoad } from '@dcloudio/uni-app';
  import { Toast } from '@/utils/uniapi/prompt';
  import { router } from '@/utils/router';
  import { PATH_COLLECTIONS, TabbarPath } from '@/enums/routerEnum';

  const redirect = ref<string | undefined>(undefined);

  interface Form {
    account: string | undefined;
    password: string | undefined;
    email?: string | undefined;
  }
  const state = reactive({
    isMerchant: false,
  });
  const form: Form = reactive({
    account: '',
    password: '',
  });

  const authStore = useAuthStore();
  const wxLogin = (e: any) => {
    uni.login({
      provider: 'weixin',
      success: async function (loginRes) {
        const data = {
          jscode: loginRes.code,
        };
        authStore
          .loginByWx(data)
          .then((result) => {
            if (result) {
              uni.showToast({
                duration: 1000,
                title: '登录成功',
                icon: 'success',
              });
              // router.back();
              uni.reLaunch({ url: '/pages/common/Home' });
            }
          })
          .catch((err) => {
            console.log('err: ', err);
          });
        // 获取用户信息
        uni.getUserInfo({
          provider: 'weixin',
          success: function (infoRes) {
            // authStore.loginByWx()
            console.log('infoRes: ', infoRes);
          },
        });
      },
    });
  };
  const submit = (e: any) => {
    authStore
      .login({
        email: form.account,
        password: form.password,
      })
      .then((result) => {
        console.log('result: ', result);
        router.push(TabbarPath.Home, {
          fail: (err) => {
            console.log(err);
          },
        });
      });
  };
  const getUserInfo = (e: any) => {
    console.log(e);
  };

  onLoad((query) => {
    redirect.value = query.redirect || undefined;
  });
</script>

<style lang="scss" scoped>
  .txt {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  .img-a {
    width: 100%;
    height: 450rpx;
    background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
    background-size: 100%;
  }
  .reg {
    font-size: 28rpx;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
    font-weight: bold;
    background: #f5f6fa;
    color: #000000;
    text-align: center;
    margin-top: 30rpx;
  }

  .login-view {
    width: 100%;
    position: relative;
    margin-top: -120rpx;
    background-color: #ffffff;
    border-radius: 8% 8% 0% 0;
  }

  .t-login {
    width: 600rpx;
    margin: 0 auto;
    font-size: 28rpx;
    padding-top: 80rpx;
  }

  .t-login button {
    font-size: 28rpx;
    background: #2796f2;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
    font-weight: bold;
  }

  .t-login input {
    height: 90rpx;
    line-height: 90rpx;
    margin-bottom: 50rpx;
    border-bottom: 1px solid #e9e9e9;
    font-size: 28rpx;
  }

  .t-login .t-a {
    position: relative;
  }

  .t-b {
    text-align: left;
    font-size: 42rpx;
    color: #ffffff;
    padding: 130rpx 0 0 70rpx;
    font-weight: bold;
    line-height: 70rpx;
  }

  .t-login .t-c {
    position: absolute;
    right: 22rpx;
    top: 22rpx;
    background: #5677fc;
    color: #fff;
    font-size: 24rpx;
    border-radius: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 25rpx;
  }

  .t-login .t-d {
    text-align: center;
    color: #999;
    margin: 80rpx 0;
  }

  .t-login .t-e {
    text-align: center;
    width: 250rpx;
    margin: 80rpx auto 0;
  }

  .t-login .t-f {
    text-align: center;
    margin: 150rpx 0 0 0;
    color: #666;
  }

  .t-login .t-f text {
    margin-left: 20rpx;
    color: #aaaaaa;
    font-size: 27rpx;
  }

  .t-login .uni-input-placeholder {
    color: #aeaeae;
  }

  .cl {
    zoom: 1;
  }

  .cl:after {
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    content: '\20';
  }
</style>
